<!-- 登录首页 -->
<script setup>
import { computed } from "vue";
import { useLayoutThemeStore } from "@/store/layout/layoutTheme.js";
import LayoutSetting from "@/layouts/components/setting/LayoutSetting.vue";
import LoginForm from "@/views/login/LoginForm.vue";
import SignInForm from "@/views/login/SignInForm.vue";
import { useRouter } from "vue-router";

const layoutSetting = useLayoutThemeStore().layoutSetting;
const showSetting = computed(() => layoutSetting.showSetting);
const algorithm = computed(() => layoutSetting.algorithm);
const title = computed(() => layoutSetting.title);

const bodyStyle = computed(() => ({
  width: "100%",
  height: "100%",
  backgroundColor: algorithm.value === "darkAlgorithm" ? "#001529" : "#3CCA74",
  position: "relative",
}));

const router = useRouter();
const hasLogin = computed(() => router.currentRoute.value.query.id);
</script>

<template>
  <a-card class="w100vw h100vh login_bg" :bodyStyle="bodyStyle">
    <a-card
      class="pos-fixed right--1 top-100 z-999"
      :bodyStyle="{ padding: '10px' }"
      v-if="showSetting"
    >
      <LayoutSetting />
    </a-card>
    <a-card
      class="pos-absolute w500px h500px login_card"
      :style="{
        top: 'calc(50% - 200px)',
        left: 'calc(50% - 200px)',
        padding: '50px',
      }"
    >
      <template #title>
        <h2 class="text-center" style="font-weight: bold; color: #31bc63">
          {{ hasLogin == "1" ? "欢迎注册" : "欢迎登录" }}
        </h2>
        <div class="text-center">{{ title }}</div>
      </template>
      <SignInForm v-if="hasLogin == '1'" />
      <LoginForm v-else />
    </a-card>
  </a-card>
</template>

<style lang="less" scoped>
.login_bg {
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("../../assets/images/signin_bg.png");
    background-repeat: no-repeat;
    background-size: 100%;
    opacity: 0.3;
  }
}
.login_card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  // overflow: hidden;
  position: relative;
  z-index: 4 !important;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-image: url("../../assets/images/login_top.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  &::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-image: url("../../assets/images/login_buttom.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
}
</style>
